<template>
	<view class="footheight">
		<view class="footer">
			<view class="footer-left">
				<view class="uni-icon uni-icon-mic" @tap="startRecognize"> </view>
			</view>
			<view class="footer-center">
				<input class="input-text" type="text" v-model="inputValue" @focus="foc" :focus="focus"></input>
			</view>
			<view class="footer-emotion" @tap="show">
				<i class="icon iconfont icon-face"></i>
			</view>
			<view class="footer-right" @tap="sendMessge">
				<view id='msg-type'>发送</view>
			</view>
		</view>
		<view v-if="showPannel">
			<swiper class="emoji-swiper" indicator-dots="true" duration="150">
				<swiper-item v-for="(page,pid) in emojiList" :key="pid">
					<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
						<image mode="widthFix" :src="'/static/img/emoji/'+em.url"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	export default {
		name: "chat-input",
		data() {
			return {
				inputValue: '',
				showPannel: false,
				focus: false,
				emojiList:[
		[{
				"url": "emoji_0@2x.png",
				"alt": "[NO]"
			},
			{
				"url": "emoji_1@2x.png",
				"alt": "[OK]"
			},
			{
				"url": "emoji_2@2x.png",
				"alt": "[下雨]"
			},
			{
				"url": "emoji_3@2x.png",
				"alt": "[么么哒]"
			},
			{
				"url": "emoji_4@2x.png",
				"alt": "[乒乓]"
			},
			{
				"url": "emoji_5@2x.png",
				"alt": "[便便]"
			},
			{
				"url": "emoji_6@2x.png",
				"alt": "[信封]"
			},
			{
				"url": "emoji_7@2x.png",
				"alt": "[偷笑]"
			},
			{
				"url": "emoji_8@2x.png",
				"alt": "[傲慢]"
			},
			{
				"url": "emoji_9@2x.png",
				"alt": "[再见]"
			},
			{
				"url": "emoji_10@2x.png",
				"alt": "[冷汗]"
			},
			{
				"url": "emoji_11@2x.png",
				"alt": "[凋谢]"
			},
			{
				"url": "emoji_140@2x.png",
				"alt": "[鼓掌]"
			},
			{
				"url": "emoji_13@2x.png",
				"alt": "[删除]"
			},
			{
				"url": "emoji_14@2x.png",
				"alt": "[勾引]"
			},
			{
				"url": "emoji_15@2x.png",
				"alt": "[发呆]"
			},
			{
				"url": "emoji_16@2x.png",
				"alt": "[发抖]"
			},
			{
				"url": "emoji_17@2x.png",
				"alt": "[可怜]"
			},
			{
				"url": "emoji_18@2x.png",
				"alt": "[可爱]"
			},
			{
				"url": "emoji_19@2x.png",
				"alt": "[右哼哼]"
			},
			{
				"url": "emoji_20@2x.png",
				"alt": "[右太极]"
			},
			{
				"url": "emoji_21@2x.png",
				"alt": "[右车头]"
			},
			{
				"url": "emoji_22@2x.png",
				"alt": "[吐]"
			},
			{
				"url": "emoji_23@2x.png",
				"alt": "[吓]"
			}
		],
		[{
				"url": "emoji_24@2x.png",
				"alt": "[咒骂]"
			},
			{
				"url": "emoji_25@2x.png",
				"alt": "[咖啡]"
			},
			{
				"url": "emoji_26@2x.png",
				"alt": "[啤酒]"
			},
			{
				"url": "emoji_27@2x.png",
				"alt": "[嘘]"
			},
			{
				"url": "emoji_28@2x.png",
				"alt": "[回头]"
			},
			{
				"url": "emoji_29@2x.png",
				"alt": "[困]"
			},
			{
				"url": "emoji_30@2x.png",
				"alt": "[坏笑]"
			},
			{
				"url": "emoji_31@2x.png",
				"alt": "[多云]"
			},
			{
				"url": "emoji_32@2x.png",
				"alt": "[大兵]"
			},
			{
				"url": "emoji_33@2x.png",
				"alt": "[大哭]"
			},
			{
				"url": "emoji_34@2x.png",
				"alt": "[太阳]"
			},
			{
				"url": "emoji_35@2x.png",
				"alt": "[奋斗]"
			},
			{
				"url": "emoji_36@2x.png",
				"alt": "[奶瓶]"
			},
			{
				"url": "emoji_37@2x.png",
				"alt": "[委屈]"
			},
			{
				"url": "emoji_38@2x.png",
				"alt": "[害羞]"
			},
			{
				"url": "emoji_39@2x.png",
				"alt": "[尴尬]"
			},
			{
				"url": "emoji_40@2x.png",
				"alt": "[左哼哼]"
			},
			{
				"url": "emoji_41@2x.png",
				"alt": "[左太极]"
			},
			{
				"url": "emoji_42@2x.png",
				"alt": "[左车头]"
			},
			{
				"url": "emoji_43@2x.png",
				"alt": "[差劲]"
			},
			{
				"url": "emoji_44@2x.png",
				"alt": "[弱]"
			},
			{
				"url": "emoji_45@2x.png",
				"alt": "[强]"
			},
			{
				"url": "emoji_46@2x.png",
				"alt": "[彩带]"
			},
			{
				"url": "emoji_47@2x.png",
				"alt": "[彩球]"
			}
		],
		[{
				"url": "emoji_48@2x.png",
				"alt": "[得意]"
			},
			{
				"url": "emoji_49@2x.png",
				"alt": "[微笑]"
			},
			{
				"url": "emoji_50@2x.png",
				"alt": "[心碎了]"
			},
			{
				"url": "emoji_51@2x.png",
				"alt": "[快哭了]"
			},
			{
				"url": "emoji_52@2x.png",
				"alt": "[怄火]"
			},
			{
				"url": "emoji_53@2x.png",
				"alt": "[怒]"
			},
			{
				"url": "emoji_54@2x.png",
				"alt": "[惊恐]"
			},
			{
				"url": "emoji_55@2x.png",
				"alt": "[惊讶]"
			},
			{
				"url": "emoji_56@2x.png",
				"alt": "[憨笑]"
			},
			{
				"url": "emoji_141@2x.png",
				"alt": "[龇牙]"
			},
			{
				"url": "emoji_58@2x.png",
				"alt": "[打哈欠]"
			},
			{
				"url": "emoji_59@2x.png",
				"alt": "[抓狂]"
			},
			{
				"url": "emoji_60@2x.png",
				"alt": "[折磨]"
			},
			{
				"url": "emoji_61@2x.png",
				"alt": "[抠鼻]"
			},
			{
				"url": "emoji_62@2x.png",
				"alt": "[抱抱]"
			},
			{
				"url": "emoji_63@2x.png",
				"alt": "[抱拳]"
			},
			{
				"url": "emoji_64@2x.png",
				"alt": "[拳头]"
			},
			{
				"url": "emoji_65@2x.png",
				"alt": "[挥手]"
			},
			{
				"url": "emoji_66@2x.png",
				"alt": "[握手]"
			},
			{
				"url": "emoji_67@2x.png",
				"alt": "[撇嘴]"
			},
			{
				"url": "emoji_68@2x.png",
				"alt": "[擦汗]"
			},
			{
				"url": "emoji_69@2x.png",
				"alt": "[敲打]"
			},
			{
				"url": "emoji_70@2x.png",
				"alt": "[晕]"
			},
			{
				"url": "emoji_71@2x.png",
				"alt": "[月亮]"
			}
		],
		[{
				"url": "emoji_72@2x.png",
				"alt": "[棒棒糖]"
			},
			{
				"url": "emoji_73@2x.png",
				"alt": "[汽车]"
			},
			{
				"url": "emoji_74@2x.png",
				"alt": "[沙发]"
			},
			{
				"url": "emoji_75@2x.png",
				"alt": "[流汗]"
			},
			{
				"url": "emoji_76@2x.png",
				"alt": "[流泪]"
			},
			{
				"url": "emoji_77@2x.png",
				"alt": "[激动]"
			},
			{
				"url": "emoji_78@2x.png",
				"alt": "[灯泡]"
			},
			{
				"url": "emoji_79@2x.png",
				"alt": "[炸弹]"
			},
			{
				"url": "emoji_80@2x.png",
				"alt": "[熊猫]"
			},
			{
				"url": "emoji_81@2x.png",
				"alt": "[爆筋]"
			},
			{
				"url": "emoji_82@2x.png",
				"alt": "[爱你]"
			},
			{
				"url": "emoji_83@2x.png",
				"alt": "[爱心]"
			},
			{
				"url": "emoji_84@2x.png",
				"alt": "[爱情]"
			},
			{
				"url": "emoji_85@2x.png",
				"alt": "[猪头]"
			},
			{
				"url": "emoji_86@2x.png",
				"alt": "[猫咪]"
			},
			{
				"url": "emoji_87@2x.png",
				"alt": "[献吻]"
			},
			{
				"url": "emoji_88@2x.png",
				"alt": "[玫瑰]"
			},
			{
				"url": "emoji_89@2x.png",
				"alt": "[瓢虫]"
			},
			{
				"url": "emoji_90@2x.png",
				"alt": "[疑问]"
			},
			{
				"url": "emoji_91@2x.png",
				"alt": "[白眼]"
			},
			{
				"url": "emoji_92@2x.png",
				"alt": "[皮球]"
			},
			{
				"url": "emoji_93@2x.png",
				"alt": "[睡觉]"
			},
			{
				"url": "emoji_94@2x.png",
				"alt": "[磕头]"
			},
			{
				"url": "emoji_95@2x.png",
				"alt": "[示爱]"
			}
		],
		[{
				"url": "emoji_96@2x.png",
				"alt": "[礼品袋]"
			},
			{
				"url": "emoji_97@2x.png",
				"alt": "[礼物]"
			},
			{
				"url": "emoji_98@2x.png",
				"alt": "[篮球]"
			},
			{
				"url": "emoji_99@2x.png",
				"alt": "[米饭]"
			},
			{
				"url": "emoji_100@2x.png",
				"alt": "[糗大了]"
			},
			{
				"url": "emoji_101@2x.png",
				"alt": "[红双喜]"
			},
			{
				"url": "emoji_102@2x.png",
				"alt": "[红灯笼]"
			},
			{
				"url": "emoji_103@2x.png",
				"alt": "[纸巾]"
			},
			{
				"url": "emoji_104@2x.png",
				"alt": "[胜利]"
			},
			{
				"url": "emoji_105@2x.png",
				"alt": "[色]"
			},
			{
				"url": "emoji_106@2x.png",
				"alt": "[药]"
			},
			{
				"url": "emoji_138@2x.png",
				"alt": "[麦克风]"
			},
			{
				"url": "emoji_108@2x.png",
				"alt": "[蛋糕]"
			},
			{
				"url": "emoji_109@2x.png",
				"alt": "[蜡烛]"
			},
			{
				"url": "emoji_110@2x.png",
				"alt": "[街舞]"
			},
			{
				"url": "emoji_111@2x.png",
				"alt": "[衰]"
			},
			{
				"url": "emoji_112@2x.png",
				"alt": "[西瓜]"
			},
			{
				"url": "emoji_113@2x.png",
				"alt": "[调皮]"
			},
			{
				"url": "emoji_114@2x.png",
				"alt": "[象棋]"
			},
			{
				"url": "emoji_115@2x.png",
				"alt": "[跳绳]"
			},
			{
				"url": "emoji_116@2x.png",
				"alt": "[跳跳]"
			},
			{
				"url": "emoji_117@2x.png",
				"alt": "[车厢]"
			},
			{
				"url": "emoji_118@2x.png",
				"alt": "[转圈]"
			},
			{
				"url": "emoji_119@2x.png",
				"alt": "[鄙视]"
			}
		],
		[

			{
				"url": "emoji_120@2x.png",
				"alt": "[酷]"
			},
			{
				"url": "emoji_121@2x.png",
				"alt": "[钞票]"
			},
			{
				"url": "emoji_122@2x.png",
				"alt": "[钻戒]"
			},
			{
				"url": "emoji_123@2x.png",
				"alt": "[闪电]"
			},
			{
				"url": "emoji_124@2x.png",
				"alt": "[闭嘴]"
			},
			{
				"url": "emoji_125@2x.png",
				"alt": "[闹钟]"
			},
			{
				"url": "emoji_126@2x.png",
				"alt": "[阴险]"
			},
			{
				"url": "emoji_127@2x.png",
				"alt": "[难过]"
			},
			{
				"url": "emoji_128@2x.png",
				"alt": "[雨伞]"
			},
			{
				"url": "emoji_129@2x.png",
				"alt": "[青蛙]"
			},
			{
				"url": "emoji_130@2x.png",
				"alt": "[面条]"
			},
			{
				"url": "emoji_131@2x.png",
				"alt": "[鞭炮]"
			},
			{
				"url": "emoji_132@2x.png",
				"alt": "[风车]"
			},
			{
				"url": "emoji_133@2x.png",
				"alt": "[飞吻]"
			},
			{
				"url": "emoji_134@2x.png",
				"alt": "[飞机]"
			},
			{
				"url": "emoji_135@2x.png",
				"alt": "[饥饿]"
			},
			{
				"url": "emoji_136@2x.png",
				"alt": "[香蕉]"
			},
			{
				"url": "emoji_137@2x.png",
				"alt": "[骷髅]"
			}
		]
	],
			}
		},
		methods: {
			//添加表情
			addEmoji(em) {
				this.inputValue += em.alt;
			},
			startRecognize: function() {
				var options = {};
				var that = this;
				options.engine = 'iFly';
				that.inputValue = "";
				plus.speech.startRecognize(options, function(s) {
					console.log(s);
					that.inputValue += s;
				}, function(e) {
					console.log("语音识别失败：" + e.message);
				});
			},
			sendMessge: function() {
				var that = this;
				if (that.inputValue.trim() == '') {
					that.inputValue = '';
				} else {
					//点击发送按钮时，通知父组件用户输入的内容
					this.$emit('send-message', {
						type: 'text',
						content: that.inputValue
					});
					that.inputValue = '';
					this.showPannel = false
				}
			},
			// 展示表情
			show() {
				this.showPannel = !this.showPannel;
				this.$emit('show')
			},
			// 光标触发隐藏表情
			foc() {
				this.showPannel = false
				this.$emit('foc')
			},
			handleEmotion(i) {
				this.inputValue += i

			},
		}
	}
</script>

<style lang="scss">
	.footer {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 80upx;
		min-height: 80upx;
		border-top: solid 1px #bbb;
		overflow: hidden;
		padding: 5upx;
		background-color: #fafafa;
	}

	.footer-left {

		width: 80upx;
		height: 80upx;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.footer-right {
		width: 100upx;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #1482D1;
	}

	.footer-emotion {
		width: 60upx;
		height: 80upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: #1482D1;
	}

	.footer-center {
		flex: 1;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.footer-center .input-text {
		flex: 1;
		background: #fff;
		border: solid 1upx #ddd;
		padding: 10upx !important;
		font-family: verdana !important;
		overflow: hidden;
		border-radius: 15upx;
	}

	@font-face {
		font-family: 'iconfont';
		/* project id 1134039 */
		src: url('http://at.alicdn.com/t/font_1134039_uait6xu86bf.eot');
		src: url('http://at.alicdn.com/t/font_1134039_uait6xu86bf.eot?#iefix') format('embedded-opentype'),
			url('http://at.alicdn.com/t/font_1134039_uait6xu86bf.woff2') format('woff2'),
			url('http://at.alicdn.com/t/font_1134039_uait6xu86bf.woff') format('woff'),
			url('http://at.alicdn.com/t/font_1134039_uait6xu86bf.ttf') format('truetype'),
			url('http://at.alicdn.com/t/font_1134039_uait6xu86bf.svg#iconfont') format('svg');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 18px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-face:before {
		content: "\e71c";
		font-size: 50upx;
	}

	.emoji-swiper {
		height: 65vw;

		swiper-item {
			display: flex;
			align-content: flex-start;
			flex-wrap: wrap;

			view {
				width: 15vw;
				height: 13vw;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 9vw;
					height: 9vw;
				}
			}
		}
	}
</style>
